import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import NavBar from "@/components/menus/NavBar";
import { Cross, Search } from "@taroify/icons";
import {
  RollingText,
  FloatingPanel,
  Button,
  List,
  Loading,
} from "@taroify/core";
import { useState } from "react";
import MyInput from "@/components/common/MyInput";
import { RenderWordsType, WordType } from "@/utils/render";
import { PagerType, SensitiveWordType, WordListType } from "@/types";
import { addWordApi, getWordListApi } from "@/api";
import { toast } from "@/utils";

export default () => {
  const anchors = [
    70,
    Math.round(0.45 * Taro.getSystemInfoSync().windowHeight),
  ];
  const [value, setValue] = useState("");
  const [selected, setSelected] = useState("色情相关");
  const [kword, setKword] = useState("");
  const [btn, setBtn] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [list, setList] = useState<Array<WordListType>>([]);
  const [loading, setLoading] = useState(false);
  const wordtype: Array<{ key: string; type: SensitiveWordType }> = [
    {
      key: "色情相关",
      type: "meinv",
    },
    {
      key: "封建迷信",
      type: "mixin",
    },

    {
      key: "医疗用语",
      type: "yixue",
    },
    {
      key: "政策相关",
      type: "zhengzhi",
    },
    {
      key: "其他",
      type: "other",
    },
  ];
  const pager: PagerType = {
    pageNum: 0,
    pageSize: 5,
  };
  function getData() {
    pager.pageNum++;
    setLoading(true);
    getWordListApi(pager).then((res) => {
      setHasMore(res.current < res.pages);
      if (pager.pageNum == 1) setList(res.records);
      else setList((prev) => [...prev, ...res.records]);
      setLoading(false);
    });
  }
  function addWord() {
    if (!kword) return toast("请输入敏感词");
    setBtn(true);
    addWordApi({ kword, type: selected })
      .then(() => {
        toast("新增敏感词成功");
        pager.pageNum = 0;
        getData();
        setKword("");
      })
      .finally(() => setBtn(false));
  }
  return (
    <NavBar
      title=" "
      left={<Cross onClick={() => Taro.navigateBack()} size={24} />}
    >
      <View className="flex justify-center items-center flex-col">
        <View className="mx-3 w-11/12">
          <MyInput
            change={setValue}
            right={<View>搜素</View>}
            left={<Search size={20} />}
          />
        </View>
        <View className="flex justify-center items-center flex-col text-xl">
          <View>当前网站已有敏感词</View>
          <RollingText startNum={0} targetNum={123} />
        </View>
        <List loading={loading} hasMore={hasMore} onLoad={() => getData()}>
          <View className="grid grid-cols-1 gap-2 pb-20 w-full">
            {list.map((item) => (
              <RenderWordsType
                key={item.kid}
                item={item}
                type={item.type}
                reload={() => {
                  pager.pageNum = 0;
                  getData();
                }}
              />
            ))}
          </View>

          <List.Placeholder>
            {loading && <Loading>加载中...</Loading>}
            {!hasMore && "没有更多了"}
          </List.Placeholder>
        </List>
        <FloatingPanel anchors={anchors}>
          <View className="text-center font-bold text-lg">新增敏感词</View>
          <View className="flex justify-around items-center px-3">
            {wordtype.map((el) => {
              return (
                <WordType
                  key={el.type}
                  type={el.type}
                  onChange={() => setSelected(el.key)}
                  select={el.key == selected}
                />
              );
            })}
          </View>
          <View className="mx-4 py-6">
            <MyInput
              padding="18px 12px"
              change={setKword}
              placeholder="请输入需要屏蔽的关键词"
            />
          </View>
          <View className="px-4">
            <Button
              loading={btn}
              color="primary"
              size="large"
              onClick={addWord}
            >
              新增敏感词
            </Button>
          </View>
        </FloatingPanel>
      </View>
    </NavBar>
  );
};
